<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8"/>
    <title>用户登录</title>
    <link href="/static/css/login.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript">
        let TxtUserName;
        let TxtPassword;
        let loginForm;
        let loginMsg;
        window.onload = function () {
            initViews();
            bindListeners();
        };

        //加载网页视图
        function initViews() {
            TxtUserName = document.getElementById("TxtUserName");
            TxtPassword = document.getElementById("TxtPassword");
            loginMsg = document.getElementById("loginMsg");
            loginForm = document.getElementById("loginForm");
        }

        //绑定事件监听
        function bindListeners() {
            loginForm.onsubmit = formOnSubmit;
        }

        //表单的提交事件函数
        function formOnSubmit() {
            const userValue = TxtUserName.value;
            const pwdValue = TxtPassword.value;
            if (userValue === null || userValue === '') {
                loginMsg.innerHTML = "用户名不能为空";
                return false;
            } else if (pwdValue === null || pwdValue === '') {
                loginMsg.innerHTML = "密码不能为空";
                return false;
            } else {
                loginMsg.innerHTML = "";
                return true;
            }
        }
    </script>
</head>
<body id="userlogin_body">
<div id="user_login">
    <dl>
        <dd id="user_top">
            <ul>
                <li class="user_top_l"></li>
                <li class="user_top_c"></li>
                <li class="user_top_r"></li>
            </ul>
        </dd>
        <form action="/user/login.do" method="post" id="loginForm">

            <dd id="user_main">
                <ul>
                    <li class="user_main_l"></li>
                    <li class="user_main_c">
                        <div class="user_main_box">
                            <ul>
                                <li class="user_main_text">用户名：</li>
                                <li class="user_main_input"><input name="loginName" maxlength="20" id="TxtUserName"
                                                                   class="txtusernamecssclass"></li>
                            </ul>
                            <ul>
                                <li class="user_main_text">密 码：</li>
                                <li class="user_main_input"><input type="password" name="password" id="TxtPassword"
                                                                   class="txtpasswordcssclass"></li>
                            </ul>
                            <ul>
                                <li class="user_main_text">Cookie：</li>
                                <li class="user_main_input">
                                    <select name="saveCookie" id="DropExpiration">
                                        <option selected="" value="None">不保存</option>
                                        <option value="Day">保存一天</option>
                                        <option value="Month">保存一月</option>
                                        <option value="Year">保存一年</option>
                                    </select>
                                </li>
                                <li class="user_main_text" id="loginMsg"
                                    style="margin-left: 5px;color: red;font-size: 14px;width: 100px"></li>
                            </ul>
                        </div>
                    </li>
                    <li class="user_main_r">
                        <input type="submit" name="IbtnEnter" value=""
                               style="background-image: url('/static/img/user_botton.gif')"
                               class="ibtnentercssclass">
                    </li>
                </ul>
            </dd>

        </form>

        <dd id="user_bottom">
            <ul>
                <li class="user_bottom_l"></li>
                <li class="user_bottom_c"></li>
                <li class="user_bottom_r"></li>
            </ul>
        </dd>
    </dl>
</div>


</body>
</html>